<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<!--视图v-->
  <div id="d1" class="container">
      <h3>学生信息查询</h3>
<!--    <span>{{s}}</span>-->
<!--    <input type="text" v-model="s">-->
<!--      学号：{{obj.sno}}-->
<!--      <br>-->
<!--      姓名：{{obj.sname}}-->
<!--      <br>-->
<!--      成绩：{{obj.score}}-->
      <table class="table table-striped">
          <tr>
              <th>学号</th><th>姓名</th><th>班级</th><th>成绩</th>
          </tr>
          <tr v-for="s in a">
              <td>{{s.sno}}</td><td>{{s.sname}}</td><td>{{s.cno}}</td><td>{{s.score}}</td>
          </tr>
      </table>
      <ul class="pagination">
          <li><a>&laquo;</a></li>
          <li class="active"><a>1</a></li>
          <li><a>2</a></li>
          <li><a>&raquo;</a></li>
      </ul>
  </div>
  <div id="d2">

  </div>
</body>
<script>
// 数据模型m
    var arr = [
        {
            "sno": 1,
            "sname": "刘怀玉",
            "score": 80,
            "stel": null,
            "sdate": "2023-06-19",
            "cno": 2301,
            "gjob": 0
        },
        {
            "sno": 2,
            "sname": "何庆发",
            "score": 88,
            "stel": null,
            "sdate": null,
            "cno": 2301,
            "gjob": 0
        },
        {
            "sno": 3,
            "sname": "懒羊羊",
            "score": 80,
            "stel": "636363",
            "sdate": null,
            "cno": 2302,
            "gjob": 0
        }
    ]
//     var lhy = {
//         "sno": 2,
//         "sname": "何庆发",
//         "score": 90
//     }
    //var str = "welcome to study vue";
// vue对象vm
    new Vue({
        "el": "#d1",
        "data":{
            //s : str,
            //obj: lhy
            a : arr
        }
    })
</script>
</html>